import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { FilterDto } from '@/render/FilterRender'
import type { AnyObject } from '@/types'
import { getAllocateRecord } from '@/api/deal'
import type { AllocateRecordDto } from '@/api/deal/types'
import { getSaleList } from '@/api/sale'

@Component
export class DialogRecord extends TableRender {
    @Prop() show!: boolean
    @Prop() saleOldId!: number

    noTablePadding = true
    noFilterPadding = true

    showDialog = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        if(val && this.saleOldId) {
            this.reloadPage(1)
        }
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    filterConfig() {
        return {
            companyName: {
                name: '',
                element: 'input',
                placeholder: '请输入公司名称',
                params: {
                    clearable: true
                }
            },
            saleId: {
                name: '',
                element: 'select',
                placeholder: '请选择接收人',
                optionsType: 'saleList',
            }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '分配公司名称'
        },

        {
            field: 'productTypeName',
            title: '产品'
        },
        {
            field: 'salesName',
            title: '接收人'
        }
    ] as TableRenderColumnTypes<AllocateRecordDto>

    async onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.saleOldId) return []
        const res = await getAllocateRecord({
            saleOldId: this.saleOldId,
            ...filters
        })
        return res
    }

    render() {
        return (
            <>
                <Dialog
                    v-model:show={this.showDialog}
                    width="600px"
                    title="操作记录"
                    alignCenter
                    v-slots={{
                        default: () => {
                            return <>
                                {super.renderFilter()}
                                {super.renderTable()}
                            </>
                        }
                    }}
                />
            </>
        )
    }
}

export default toNative<{ saleOldId: number }, {}>(DialogRecord)
